import React, { useContext } from "react";
import { CloseOutlined } from "@ant-design/icons";
import "./contenthead.less";
import { Link } from "react-router-dom";
import { PageContext } from "./context";

export function PageHead() {
    const pages = useContext(PageContext);

    return (
        <Head defaultKey={pages.now}>
            {setPageItem(pages.pages, pages.setNow, pages.now.key)}
        </Head>
    )
}

function setPageItem(pages: Array<any>, setSelect: any, select: any) {
    return pages.map((value) => {
        return <PageItem
            title={value.name}
            selectKey={value.key}
            setSelect={setSelect}
            select={select}
            key={value.key}
        ></PageItem>
    })
}

function Head(props: { defaultKey?: any, children?: React.ReactNode | Array<React.ReactNode> }) {
    return (
        <div className="api-page-head">
            {props.children}
        </div>
    )
}

function PageItem(props: { title?: string, setSelect: (value: any) => any, select?: any, selectKey?: any }) {
    const pages = useContext(PageContext);
    const onHandleClick = () => {
        if (myhas(pages.pages, props.selectKey) !== -1) {
            pages.setNow({
                name: props.title,
                key: props.selectKey
            });
            sessionStorage.setItem("now", JSON.stringify({
                name: props.title,
                key: props.selectKey
            }))
        }
    }
    let index = myhas(pages.pages, props.selectKey);
    const onClose = (e: any) => {
        e.stopPropagation();
        e.preventDefault();
        let newArr = pages.pages.slice(0);
        let index = myhas(newArr, props.selectKey);
        if (index !== -1) {
            // console.log(pages.now, props.selectKey)
            // console.log(index === 0 ? pages.pages[1] : pages.pages[index - 1]);
            if (pages.now.key === props.selectKey) {
                pages.setNow((index === 0 ? pages.pages[1] : pages.pages[index - 1]))
                sessionStorage.setItem("now", JSON.stringify(index === 0 ? pages.pages[1] : pages.pages[index - 1]));
            }
            newArr.splice(index, 1);
            pages.setPages(newArr);
            sessionStorage.setItem("pages", JSON.stringify(newArr));
        }
    }
    let pageItem: React.ReactElement;
    if (props.selectKey === pages.now.key) {
        pageItem = <div
            onClick={onHandleClick}
            className={`api-page-item ${props.select === props.selectKey ? "select" : ""}`}
        >

            <span>{props.title}</span>

            {pages.pages.length !== 1 ?
                <div
                    className="api-close-page"
                    style={{
                        padding: 0,
                        borderRadius: "50%",
                        height: 20,
                        width: 20,
                        alignSelf: "center",
                        color: "#777",
                        textAlign: "center"
                    }}
                    onClick={onClose}
                >
                    <Link
                        to={`/index/project/apis/${index === 0 ? (pages.pages[1] ? pages.pages[1].key : "") : pages.pages[index - 1].key}`}
                        style={{
                            width: 20,
                            height: 20,
                            borderRadius: "50%"
                        }}
                    >
                        <CloseOutlined />
                    </Link>
                </div> : ""
            }
        </div>
    } else {
        if (props.selectKey === pages.now.key) {
            pageItem = <Link style={{ marginRight: 5 }} to={"/index/project/apis/" + props.selectKey} key={props.selectKey}>
                <div
                    onClick={onHandleClick}
                    className={`api-page-item ${props.select === props.selectKey ? "select" : ""}`}
                >

                    <span>{props.title}</span>
                    <div
                        className="api-close-page"
                        style={{
                            padding: 0,
                            borderRadius: "50%",
                            height: 20,
                            width: 20,
                            alignSelf: "center",
                            color: "#777",
                            textAlign: "center"
                        }}
                        onClick={onClose}
                    >
                        {pages.pages.length === 1 ? "" :
                            <Link
                                to={`/index/project/apis/${index === 0 ? (pages.pages[1] ? pages.pages[1].key : "") : pages.pages[index - 1].key}`}
                                style={{
                                    width: 20,
                                    height: 20,
                                    borderRadius: "50%"
                                }}
                            >
                                <CloseOutlined />
                            </Link>
                        }

                    </div>
                </div>
            </Link>
        } else {
            pageItem = <Link style={{ marginRight: 5 }} to={"/index/project/apis/" + props.selectKey} key={props.selectKey}>
                <div
                    onClick={onHandleClick}
                    className={`api-page-item ${props.select === props.selectKey ? "select" : ""}`}
                >

                    <span>{props.title}</span>
                    <div
                        className="api-close-page"
                        style={{
                            padding: 0,
                            borderRadius: "50%",
                            height: 20,
                            width: 20,
                            alignSelf: "center",
                            color: "#777",
                            textAlign: "center"
                        }}
                        onClick={onClose}
                    >
                        {pages.pages.length === 1 ? "" :
                            <CloseOutlined />
                        }

                    </div>
                </div>
            </Link>
        }
    }
    return (
        <>
            {pageItem}
        </>
    )
}


function myhas(data: Array<any>, key: any) {
    for (let i = 0; i < data.length; i++) {
        if (data[i].key === key) {
            return i;
        }
    }
    return -1;
}